<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <h2 class="title">个人信息</h2>
      <el-form :model="profileForm" label-width="100px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="profileForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <!-- 年龄 -->
        <el-form-item label="年龄" prop="age">
          <el-input type="number" v-model="profileForm.age" placeholder="请输入年龄"></el-input>
        </el-form-item>

        <!-- 性别 -->
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="profileForm.gender">
            <el-radio label="男" value="1">男</el-radio>
            <el-radio label="女" value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 手机号 -->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="profileForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="profileForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <!-- 家庭住址 -->
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="profileForm.address" placeholder="请输入家庭住址"></el-input>
        </el-form-item>

        <!-- 头像 -->
        <el-form-item label="头像" prop="profilePictureUrl">
          <el-upload
              v-model:file-list="fileList"
              v-model:action="actionUrl"
              name="file"
              limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" />
          </el-dialog>
        </el-form-item>

        <!-- 个性签名 -->
        <el-form-item label="个性签名" prop="personalProfile">
          <el-input v-model="profileForm.personalProfile" placeholder="请输入个性签名"></el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交修改</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from "axios";

const profileForm = ref({
  userId:'',
  username: '',
  age: '',
  gender: '',
  phone: '',
  email: '',
  address: '',
  profilePictureUrl: '',
  personalProfile: ''
});

const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const actionUrl = ref(BASE_URL + '/v1/file/upload');
const user=ref(getUser());
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleRemove = (file, fileList) => {
  console.log(file, fileList);
  const imgUrl = file.response.data;
  axios.post(BASE_URL + '/v1/file/remove?imgUrl=' + imgUrl).then(response => {
    if (response.data.code === 2000) {
      ElMessage.success('头像删除成功');
    }
  });
};

const submitForm = () => {
  if (fileList.value.length > 0) {
    profileForm.value.profilePictureUrl= fileList.value[0].response.data;
  }
  profileForm.value.userId=user.value.userId;
  axios.post(BASE_URL + '/v1/user/update', profileForm.value).then(response => {
    if (response.data.code === 200) {
      ElMessage.success('个人信息修改成功');
      localStorage.setItem('user',JSON.stringify(response.data.data));
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};

const resetForm = () => {
  profileForm.value = {
    username: '',
    age: '',
    gender: '',
    phone: '',
    email: '',
    address: '',
    profilePictureUrl: '',
    personalProfile: ''
  };
  fileList.value = [];
};

onMounted(() => {
  const user = JSON.parse(localStorage.getItem('user'));
  console.log(user);
  if (user) {
    profileForm.value = {
      username: user.username || '',
      age: user.age || '',
      gender: user.gender || '',
      phone: user.phone || '',
      email: user.email || '',
      address: user.address || '',
      profilePictureUrl: user.profilePictureUrl || '',
      personalProfile: user.personalProfile || ''
    };

    if (user.profilePictureUrl) {
      fileList.value = [{
        name: '头像',
        url: user.profilePictureUrl
      }];
    }
  }
});
</script>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f3f4f6;
}

.profile-card {
  width: 600px;
  padding: 20px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>





